<template>
	<view>
		<view class="content">
			<view class="top_box">
				<navigator class="top_box_right" :url="token?'../personal/infomation':'../login/login'" open-type="navigate">
					<image class="top_avatar"
							:src="token == false?'../../static/img/userinfo.png':picture.getImgUrl(userinfo.avatar || '')"
							mode="aspectFill"></image>
					<view class="top_nickname">{{token == false? '登录/注册':userinfo.nickname}}</view>
				</navigator>

				<view class="top_box_left" @click="Getmessage">
					<image class="top_box_left_img" src="../../static/img/@dfeDfe.png" mode=""></image>
				</view>
			</view>
			<view class="list_box1" v-for="(item, index) in mytablist" :key="index" >
				<view class="list_title">{{item.name}}</view>
				<view class="list_box_item" v-for="(item1 , index1) in item.list" :key="index1" @click="naviligo(item1.url)" >
					<image class="list_item_l" :src="item1.icon" mode=""></image>
					<view class="list_item_r">
						<view class="list_item_title">{{item1.name}}</view>
						<image src="../../static/img/left.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mytablist
	} from '@/utils/data.js'
	import {
		headlook
	} from '../../api/personal.js'
	export default {
		data() {
			return {
				userinfo: [],
				token: false,
				mytablist: []
			}
		},
		onLoad() {
			this.mytablist = mytablist
		},
		onShow() {
			this.userlist()
		},
		methods: {
			//消息跳转
			Getmessage() {
				//点击前检测是否登录
				if (!this.checkLogin()) return false
				uni.navigateTo({
					url: '../massage/massage'
				})
			},
			//子菜单跳转
			naviligo(i) {
				//点击前检测是否登录
				if (!this.checkLogin()) return false
				this.picture.navigateTo(i)
			},
			//页面渲染
			userlist() {
				if (!this.checkLogin()) return false
				this.token = uni.getStorageSync('token')
				headlook().then((res) => {
					if (res.code != 401)
						this.userinfo = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		overflow-y: auto;
		background-color: #fff;

		.top_box {
			width: 100%;
			height: 188rpx;
		 padding: 36rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top_box_right {
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.top_avatar {
					width: 120rpx;
				 height: 120rpx;
					border-radius: 50%;
				}

				.top_nickname {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #333;
					margin-left: 40rpx;
				}
			}

			.top_box_left {
				height: 100%;

				.top_box_left_img {
					width: 32rpx;
					height: 36rpx;
				}
			}
		}

		.list_box1 {
			width: 92%;
			//height: 378rpx;
			background: #fff;
			box-shadow: 0px 2rpx 14rpx 0px #b8b8b8;
			border-radius: 8rpx;
			margin: 0 auto;
			padding: 0 18rpx
				/* margin-top: 20rpx; */
			;
			margin-bottom: 20rpx;

			.list_title {
				width: 100%;
				height: 94rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 700;
				color: #333;
			}

			.list_box_item {
				width: 100%;
				height: 92rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.list_item_l {
					width: 40rpx;
					height: 44rpx;
				}

				.list_item_r {
					width: 88%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #f5f5f5;

					image {
						width: 10rpx;
						height: 20rpx;
					}
				}
			}
		}

		.customerbox {
			height: 100rpx;
			line-heht: 100rpx;
			text-align: center;
			background: #fff;
			width: 92%;
			height: auto;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding-bottom: 80rpx;
		}
	}
</style>
